<template>
    <div class="box">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Select v-model="searchObj.place_id" placeholder="请选择场所" clearable filterable style="width: 300px">
                        <Option v-for="item in organizationList"
                                :value="item.verification_code"
                                :key="item.id">{{ item.place_name }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <DatePicker v-model="statsTime" type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss" placeholder="请选择统计时间段"
                                style="width: 350px"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="warning" @click="exportData">
                        <Icon type="md-arrow-round-down" />
                        导出
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-table
                    border
                    resizable
                    highlight-hover-row
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}"
                    export-config>
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column field="name" title="姓名" width="100"></vxe-table-column>
<!--                <vxe-table-column field="sex" title="性别" width="100"></vxe-table-column>-->
                <vxe-table-column title="证件类型" width="100">
                    <template  v-slot="{ row }">
                        <span v-if="row.card_type == '1'">身份证号</span>
                        <span v-if="row.card_type == '2'">军官证</span>
                        <span v-if="row.card_type == '3'">护照</span>
                        <span v-if="row.card_type == '4'">港澳通行证</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="card_no" width="200" title="证件号"></vxe-table-column>
                <vxe-table-column field="tel" title="联系方式" width="150"></vxe-table-column>
                <vxe-table-column field="nickname" title="微信昵称" width="150"></vxe-table-column>
                <vxe-table-column width="320" title="出发地">
                    <template  v-slot="{ row }">
                        <span>{{row.originate_province}}{{row.originate_city}}{{row.originate_country}}{{row.community}}{{row.street}}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="280" field="destination" title="目的地"></vxe-table-column>
                <vxe-table-column width="120" field="add_car" title="车次号"></vxe-table-column>
                <vxe-table-column width="120" title="核酸检测证明">
                    <template  v-slot="{ row }">
                        <span v-if="row.nucleic_acid_detection_certificate == '0'">无</span>
                        <span v-if="row.nucleic_acid_detection_certificate == '1'">有</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="120" title="健康通行绿码">
                    <template  v-slot="{ row }">
                        <span v-if="row.healthy_code == '0'">无</span>
                        <span v-if="row.healthy_code == '1'">有</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="170" field="createTime" title="扫码时间"></vxe-table-column>
            </vxe-table>
        </Row>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo"/>
        </Row>
    </div>
</template>

<script>
import { getUserPermitList, getPlaceMapList } from '@/api/customer-service'
import { formatDate } from '@/components/dateFormat'
export default {
  components: {},
  data () {
    return {
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      statsTime: '',
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalWidth: 600,
      modalData: {},
      searchObj: {},
      tableData: [],
      selectData: [],
      organizationList: [],
      tableLoading: false
    }
  },
  methods: {
    searchAction () {
      this.init()
    },
    init () {
      const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      console.log(startTime, '开始时间找到了')
      let data = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        place_id: this.$common.xeUtils.trim(this.searchObj.place_id),
        startTime: startTime,
        endTime: endTime
      }
      this.tableLoading = true
      getUserPermitList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getList () {
      getPlaceMapList().then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          data.data.forEach(item => {
            this.organizationList.push(item)
          })
        } else {
          this.error(data)
        }
      })
    },
    exportData () {
      const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      let str = ''
      if (!this.$common.xeUtils.isEmpty(this.searchObj.place_id)) {
        str += '&place_id=' + this.searchObj.place_id
      }
      if (!this.$common.xeUtils.isEmpty(startTime)) {
        str += '&startTime=' + startTime
      }
      if (!this.$common.xeUtils.isEmpty(endTime)) {
        str += '&endTime=' + endTime
      }
      console.log('http://sstpw.tripln.top/wl/demo/commonExcelExport?id=16' + str)
      location.href = 'http://sstpw.tripln.top/wl/demo/commonExcelExport?id=16' + str
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 10
    }
  },
  mounted () {
    const param = {
      pageNo: this.pageObj.pageNo,
      pageSize: this.pageObj.pageSize
    }
    this.init(param)
    this.getList()
  }
}
</script>

<style scoped>
    .ivu-form-item {
        margin-bottom: 0;
    }

    .box {
        margin-bottom: 50px;
    }
</style>
